<template>
  <div class="resPane" id="resPane">
    <div class="resTitle">
      <div class="el-icon-dish">饭店介绍</div>
    </div>
    <div class="resInfo" v-for="(restaurant,index) in restaurants" ><a href="#" title="点击查看详情">
      <img :src="getImgsrc(restaurant.resimg)" @mouseenter="enlargeimg(index)" @mouseleave="narrowimg(index)"/></a>
      <div class="resInfodesc" @mouseenter="shadow(index)" @mouseleave="noshadow(index)">
         <span> {{ restaurant.resdesc }} </span>
      </div>
    </div>
  </div>
</template>

<script>
  import api from "../../../axios/api";

  export default {
    name: "restaurant",
    data() {
      return {
        restaurants: []
      }
    },
    methods: {
      narrowimg(index){
        $($(".resInfo img")[index]).css("transform","scale(1)");
      },
      enlargeimg(index){
        $($(".resInfo img")[index]).css("transform","scale(1.1)");
      },
      shadow(index){
         // alert("11")
        $($(".resInfodesc")[index]).css("box-shadow","0px 10px 10px -10px #c4c4c4 ");
      },
      noshadow(index){
        // alert("11")
        $($(".resInfodesc")[index]).css("box-shadow","0 0 0 ");
      },
      getImgsrc: function (imgsrc) {
        return "../../../static/images/resimages/" + imgsrc;
      },
      setDataFromAxios: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/restaurantImg", null, "post")
          .then(res => {
            this.restaurants = res;
            console.log(res)

          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },

    },
    created() {
      this.setDataFromAxios();
    }
  }
</script>
<style scoped lang="stylus">
  .resPane
    width 1010px
    height 319px
    margin 0 auto
    content: ""
    display: block
    clear: both // 给父元素添加伪类清除浮动
    .resTitle

      font-size 17px
      width 100px
      height 24px
      .el-icon-dish
        font-weight 600
     .resInfo
      overflow hidden
      position relative
      margin 15px 0 0 0
      float: left
      margin-right 11px
      width 325px
      height 280px
      .resInfodesc

        transition: all 0.6s;
        font-size 15px
        text-indent: 2em
        position absolute
        z-index 3
        width 325px
        height 70px
        top 200px
        color #000000
        opacity:0.8
        border-radius  0 0 5px 5px

      img
        transition: all 0.6s;
        padding 0
        width 325px
        height 200px
        border-radius 5px 5px 0 0


</style>
